<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Login</title>
</head>
<body>
    <div class="login-container" id="app">
        <!-- 左边内容 -->
        <div class="left-container">
            <div class="title"><span>登录</span></div>
            <div class="input-container">
                <input type="text" v-model="user.name" placeholder="用户名">
                <input type="password" v-model="user.password" placeholder="密码">
            </div>
            <div class="message-container">
                <span>忘记密码</span>
            </div>
        </div>
        <!-- 右边内容 -->
        <div class="right-container">
            <div class="regist-container">
                <span class="regist">注册</span>
            </div>
            <div class="action-container">
                <span @click="commit">提交</span>
            </div>
        </div>
    </div>
    <!-- axios在线地址 -->
    <script src="./js/axios.js"></script>
    <!-- 开发版本 -->
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                user:{},
            },
            methods: {
                commit(){
                    axios.post(
                        `/userinfo/login.do`, this.user).then(response=> {   // 箭头函数否则 this.$message 报错
                            console.log(response.data);
                            // this.$message({
                            //     message: response.data,
                            //     // type: 'success'
                            // });
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>